<template>
    <div id="shopList">
        <div class="list">
            <div class="item">
                <div class="check">
                    <el-checkbox v-model="single"></el-checkbox>
                </div>
                <div class="img">
                    <img src="https://img30.360buyimg.com/n0/s80x80_jfs/t1/157479/8/617/227821/5febe1a8E7e43e2dc/a18c419cdeb93324.jpg.dpg">
                    <div class="tetx">狼蛛（AULA）F2088机械键盘 有线键盘 游戏键盘 104键混光 赛博朋克 宏</div>
                </div>
                <div class="parameter">F2088【朋克版】青轴</div>
                <div class="price">￥139.00</div>
                <div class="num"><el-input-number v-model="num" @change="handleChange" :min="1" label="描述文字"></el-input-number></div>
                <div class="total">￥139.00</div>
                <div class="ops"><el-button type="danger">删除</el-button></div>
            </div>

             <div class="item">
                <div class="check">
                    <el-checkbox v-model="single"></el-checkbox>
                </div>
                <div class="img">
                    <img src="https://img30.360buyimg.com/n0/s80x80_jfs/t1/157479/8/617/227821/5febe1a8E7e43e2dc/a18c419cdeb93324.jpg.dpg">
                    <div class="tetx">狼蛛（AULA）F2088机械键盘 有线键盘 游戏键盘 104键混光 赛博朋克 宏</div>
                </div>
                <div class="parameter">F2088【朋克版】青轴</div>
                <div class="price">￥139.00</div>
                <div class="num"><el-input-number v-model="num" @change="handleChange" :min="1" label="描述文字"></el-input-number></div>
                <div class="total">￥139.00</div>
                <div class="ops"><el-button type="danger">删除</el-button></div>
            </div>

             <div class="item">
                <div class="check">
                    <el-checkbox v-model="single"></el-checkbox>
                </div>
                <div class="img">
                    <img src="https://img30.360buyimg.com/n0/s80x80_jfs/t1/157479/8/617/227821/5febe1a8E7e43e2dc/a18c419cdeb93324.jpg.dpg">
                    <div class="tetx">狼蛛（AULA）F2088机械键盘 有线键盘 游戏键盘 104键混光 赛博朋克 宏</div>
                </div>
                <div class="parameter">F2088【朋克版】青轴</div>
                <div class="price">￥139.00</div>
                <div class="num"><el-input-number v-model="num" @change="handleChange" :min="1" label="描述文字"></el-input-number></div>
                <div class="total">￥139.00</div>
                <div class="ops"><el-button type="danger">删除</el-button></div>
            </div>

             

        </div>

        <!--分页-->
        <Page :total="100" />

        <div class="bottom">
            <div class="allCheck">
                 <el-checkbox v-model="single">全选</el-checkbox>
            </div>
            <div class="operation">
                <a href="javascript:;">删除选中的商品</a>
                <a href="javascript:;">清空购物车</a>
            </div>

            <div class="price-sum">
                <span>已选择<em>1</em>件产品</span>
                <span>总计<em>360</em>元</span>
            </div>

            <div class="submit">
                <el-button type="danger">结算</el-button>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name:'shopList',
    data(){
        return{
            single:true,
            num:1
        }
    },
    methods:{
        handleChange(val){
            console.log(val)
        }
    }
}
</script>

<style lang="scss" scoped>
#shopList{
    width: 100%;
}
.list{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    .item{
        margin-top: 30px;
        width: 100%;
        max-height: 120px;
        border: 1px solid #f1f1f1;
        border-top: 2px solid #aaa;
        display: flex;
        flex-wrap: wrap;
        .check{
            width: 10%;
            text-align: center;
            max-height: 120px;
            line-height: 120px;
        }
        .img{
            width: 20%;
            max-height: 120px;
            margin-top: 20px;
            img{
                width: 80px;
                height: 80px;
                float: left;
            }
            .tetx{
               max-height: 120px;
               margin-left: 90px;
            }
        }
        .parameter{
            width: 15%;
            max-height: 120px;
            line-height: 120px;
            text-align: center;
        }
        .price{
            width:10%;
            max-height: 120px;
            line-height: 120px;
            text-align: center;
            color: crimson;
        }
        .num{
            width: 15%;
            max-height: 120px;
            line-height: 120px;
            text-align: center;
        }
        .total{
            width: 15%;
            max-height: 120px;
            line-height: 120px;
            text-align: center;
            color: crimson;
        }
        .ops{
            width:15%;
            max-height: 120px;
            line-height: 120px;
            text-align: center;
        }

    }
}
.bottom{
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #aaa;
    height: 50px;
    .allCheck{
        width: 10%;
        text-align: center;
        line-height: 50px;
    }
    .operation{
        width: 30%;
        line-height: 50px;
        text-indent: 1em;
        a{
            color: crimson;
            font-size: 12px;
            display: inline-block;
            text-indent: 2em;
        }
    }
    .price-sum{
        width: 40%;
        line-height: 50px;
        text-indent: 1em;
        span{
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            text-indent: 3em;
            em{
                color: crimson;
                font-size: 18px;
            }
        }
    }
    .submit{
        width: 20%;
        line-height: 50px;
        text-align: right;
        padding-right:50px ;
    }
}
</style>